<template>
  <div style="height: 100%">
    <div v-if="subFormWidgetList.length > 0">
      <ElDivider>子表单</ElDivider>
      <Draggable
        :clone="cloneWidget"
        :group="{ name: 'dragGroup', pull: 'clone', put: false }"
        :sort="false"
        :list="subFormWidgetList"
        item-key="type"
        tag="ul"
      >
        <template #item="{ element: ctn }">
          <li :key="ctn.type" :title="ctn.name" style="display: inline-block; list-style-type: none; text-align: center">
            <div class="widget-item">
              <Icon icon="sub-form" size="32px" color="#66c0b8"></Icon>
            </div>
            <div>{{ ctn.name }}</div>
          </li>
        </template>
      </Draggable>
    </div>
    <div v-for="item in widgetList" :key="item.type">
      <ElDivider>{{ item.name }}</ElDivider>
      <Draggable
        :clone="cloneWidget"
        :group="{ name: 'dragGroup', pull: 'clone', put: false }"
        :sort="false"
        :list="item.children"
        item-key="type"
        tag="ul"
      >
        <template #item="{ element: ctn }">
          <li :key="ctn.type" :title="ctn.name" style="display: inline-block; list-style-type: none; text-align: center">
            <div class="widget-item">
              <Icon :icon="ctn.icon" size="32px" color="#66c0b8"></Icon>
            </div>
            <div>{{ ctn.name }}</div>
          </li>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script setup lang="ts" name="EntityPanel">
import { ref, watch } from "vue";
import { ElDivider } from "element-plus";
import Draggable from "@/components/Draggable";
import { Icon } from "@/components/Icon";
import { deepClone, generateId } from "../../../util/common";
import { getWidget } from "../../../util/design";
import appApi from "@/views/micro/app/api";
const props = defineProps({
  designer: {
    type: Object
  }
});
const widgetList = ref([]);
const cloneWidget = widget => {
  const newWidget = deepClone(widget);
  const tempId = generateId();
  newWidget.id = newWidget.type + tempId;
  return newWidget;
};
const subFormWidgetList = ref([]);
watch(
  () => props.designer!.global.appId,
  async id => {
    if (id) {
      const entityList = (await appApi.getEntityBoList({ id })) || [];
      if (entityList.length > 0) {
        const widgetArray = [];
        const subFormWidgetArray = [];
        for (const entity of entityList) {
          const type = "entity" + entity.id;
          const name = entity.entityName;
          const children = [];
          for (const field of entity.fieldList) {
            const widget = getWidget(field);
            children.push(widget);
          }
          widgetArray.push({ type, name, children });

          if (entity.id !== props.designer!.global.entityId) {
            subFormWidgetArray.push({
              type: "SubForm",
              name: entity.entityName,
              icon: "sub-form",
              widgetList: children,
              elProps: {
                title: entity.entityName,
                span: 24,
                shadow: "never",
                entityId: entity.id,
                type: "single"
              }
            });
          }
        }
        widgetList.value = widgetArray;
        subFormWidgetList.value = subFormWidgetArray;
      }
    } else {
      widgetList.value = [];
    }
  },
  {
    immediate: true
  }
);
</script>

<style scoped>
ul {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

.widget-item {
  display: inline-block;
  height: 32px;
  width: 32px;
  padding: 10px;
  margin: 10px;
  cursor: move;
  text-align: center;
  text-overflow: ellipsis;
  border-radius: 10px;
  border: 1px solid gainsboro;
  box-sizing: content-box;
}

.widget-item:hover {
  background-color: #efefef;
}
</style>
